<template>
  <div class="bartendPerOrderRemark">
    <template v-if="isPerOrder">
      <div class="title">订单备注</div>
      <div class="remarkBox">
        <van-field v-model="remark" autosize type="textarea" maxlength="50" placeholder="请输入" show-word-limit />
      </div>
      <div class="upload_box">
        <div class="showBox" v-for="(item, index) in imageUrl" :key="index">
          <img :src="item" alt="" />
          <div class="closeImg" @click="delImg(index)">
            <i class="iconfont icon-close11"></i>
          </div>
        </div>
        <van-uploader :after-read="multipleMethod" multiple max-count="10">
          <div class="addBox">
            <i class="iconfont icon-life-game-plus"></i>
          </div>
        </van-uploader>
      </div>
      <div class="tips">最多上传10张图片，格式jpg、png、jpeg、svg等</div>
    </template>
    <template v-else>
      <div class="title">{{ employee_id > 0 ? "服务员" : "用户" }}订单备注</div>
      <div class="remarkBox" style="background-color: #fff; text-align: left">
        <span>{{ remark }}</span>
      </div>
      <div class="upload_box">
        <div class="showBox" v-for="(item, index) in remark_pic" :key="index">
          <img :src="item" alt="" />
        </div>
      </div>
    </template>
  </div>
</template>
<script>
export default {
  props: {
    isPerOrder: {
      type: Boolean,
      default: true
    },
    remark_pic: {
      type: Array,
      default: () => []
    },
    remark: {
      type: String,
      default: ""
    },
    employee_id: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      remark: "",
      imageUrl: [],
      locImageUrl: []
    };
  },
  methods: {
    getRemark() {
      return {
        remark: this.remark,
        imageUrl: this.imageUrl,
        locImageUrl: this.locImageUrl
      };
    },
    delImg(index) {
      this.imageUrl.splice(index, 1);
      this.locImageUrl.splice(index, 1);
    },
    multipleMethod(e, flag) {
      if (e && e.length) {
        for (let i = 0; i < e.length; i++) {
          this.onRead(e[i], flag);
        }
      } else {
        this.onRead(e, flag);
      }
    },
    onRead(e) {
      this.$toast.loading({
        message: "上传中",
        forbidClick: true
      });
      let fd = new FormData();
      let uploadUrl = this.fun.getRealUrl("upload.uploadPic", {});
      fd.append("file", e.file);
      axios
        .post(uploadUrl, fd, {
          headers: { "Content-Type": "multipart/form-data" }
        })
        .then(response => {
          let responseData = response.data;
          this.$toast.clear();
          if (responseData.result === 1) {
            this.imageUrl.push(responseData.data.img_url);
            this.locImageUrl.push(responseData.data.img);
          } else {
            this.$toast(responseData.msg);
          }
        })
        .catch(error => {
          console.log(error);
        });
    }
  }
};
</script>
<style lang="scss" scoped>
.bartendPerOrderRemark {
  padding: 0.75rem;
  box-sizing: border-box;
  margin: 0.63rem 0.75rem 0 0.75rem;
  background: #fff;
  border-radius: 0.5rem;
  .title {
    font-size: 0.81rem;
    color: #00001c;
    text-align: left;
    margin-bottom: 0.75rem;
  }
  .remarkBox {
    background: #f5f5f5;
    margin-bottom: 0.63rem;
    .van-cell {
      background: #f5f5f5;
    }
  }
  .upload_box {
    margin-top: 0.63rem;
    display: flex;
    flex-wrap: wrap;
    .addBox {
      width: 4.63rem;
      height: 4.63rem;
      background: #f8f8f8;
      border-radius: 0.5rem;
      margin-left: 0.63rem;
      line-height: 4.63rem;
      text-align: center;
      .icon-life-game-plus {
        font-size: 1rem;
        color: #d6d6dc;
      }
    }
    .addBox:first-child {
      margin-left: 0;
    }
    .showBox {
      width: 4.63rem;
      height: 4.63rem;
      border-radius: 0.5rem;
      position: relative;
      margin-bottom: 0.63rem;
      margin-right: 0.63rem;
      img {
        width: 100%;
        height: 100%;
        border-radius: 0.5rem;
      }

      .closeImg {
        position: absolute;
        right: 0;
        top: 0;
        width: 1.25rem;
        height: 1.13rem;
        background: rgba($color: #000000, $alpha: 0.5);
        border-radius: 0rem 0.5rem 0rem 0.5rem;
        .iconfont {
          font-size: 0.7rem;
          color: #fff;
        }
      }
    }
    .showBox:nth-child(4n) {
      margin-right: 0;
    }
  }
  .tips {
    font-size: 0.69rem;
    color: #999999;
    margin-top: 0.5rem;
    text-align: left;
  }
}
</style>
